<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
//			window.onload = function(){
//				var p = document.querySelector("p");
//				p.style.color = "red";
//			}

//			$(document).ready(function(){
//				
//			})
			
			//简写
			$(function(){				
				//#id 选择器
				$("#p1").css("color","blue");
				
				//类型选择器
				$("span").css("color","red");
				
				//class选择器
				$(".box").css("color","gold");
				
				//群组选择器
				$("#p1,.box").css("background","black");
				
				//后代选择器
				//$(".box p").css("font-size","30px");
				
				//子选择器
				$(".box>p").css("font-size","30px");
				
				// :not选择器
//				$(".list li").not(".li3").css("color","red");
				
				//:nth-child选择器
				$(".list li:nth-child(-n+3)").css("color","red");
			})
			
		</script>
	</head>
	<body>
		<p id="p1">高喊反对户籍卡更好地发挥就</p>
		<span>123</span><span>fjdhfj</span>
		<div class="box">
			<p>和反对广泛但是</p>
			<h3>
				<p>vgfnvbnv</p>
			</h3>
		</div>
		<ul class="list">
			<li>复古怀旧风格</li>
			<li>复古怀旧风格</li>
			<li class="li3">复古怀旧风格</li>
			<li>复古怀旧风格</li>
			<li>复古怀旧风格</li>
		</ul>
	</body>
</html>
